<!DOCTYPE html>
<html>
	<head>
		<title>Title</title>
		<meta charset="utf-8">
		<!-- <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> -->

		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

	</head>
	<body>
		<div id="app" style="display: flex;justify-content: center;">
			<!--设立一个div-->
			<div>
				<h2>注册表单</h2>
				<br>
				<!--input的应用-->
				<label>用户名称</label>
				<input v-model="username" placeholder="用户名称"><br><br>
				<label>密码</label>
				<input v-model="password" type="password" placeholder="输入密码"><br><br>
				<label>重复输入密码</label>
				<input type="password" v-model="rePassword" placeholder="重复输入密码"><br><br>
				<label>性别</label>
				<input type="radio" id="male" value="男" v-model="sex">
				<label for="male">男</label>
				<input type="radio" id="female" value="女" v-model="sex">
				<label for="female">女</label><br><br>
				<label>爱好</label>
				<input type="checkbox" id="basketball" value="蓝球" v-model="hobby">
				<label for="basketball">篮球</label>
				<input type="checkbox" id="football" value="足球" v-model="hobby">
				<label for="football">足球</label>
				<input type="checkbox" id="music" value="音乐" v-model="hobby">
				<label for="music">音乐</label>
				<input type="checkbox" id="book" value="看书" v-model="hobby">
				<label for="book">看书</label>
				<input type="checkbox" id="game" value="打游戏" v-model="hobby">
				<label for="game">打游戏</label>
				<input type="checkbox" id="other" value="其他" v-model="hobby">
				<label for="other">其他</label><br><br>
				<label>职业</label>
				<select v-model="work">
					<option disabled value="">请选择</option>
					<option>学生</option>
					<option>老师</option>
					<option>管理员</option>
					<option>工作员</option>
					<option>其他</option>
				</select><br><br>
				<label>备注</label>
				<textarea v-model="note" placeholder="备注"></textarea><br><br>
				<input @keyup.enter="submit">
				<button v-on:click="submit">提交</button>
			</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					username: '',
					password: '',
					rePassword: '',
					sex: '',
					hobby: [],
					work: '',
					note: ''
				},
				methods: {
					submit() {
						if (this.password === this.rePassword) {
							let con = confirm("用户名：" + this.username + ' 性别：' +
								this.sex + ' 爱好：' + this.hobby.join('-') + ' 职业：' +
								this.work + ' 备注：' + this.note);
							if (con) alert("提交成功");
							else alert("取消提交");
						} else {
							alert("两次密码输入不一致！")
						}
					}
				}
			})
		</script>
	</body>
</html>
